<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线考试平台</title>
    <link rel="shortcut icon" href="static/layui/images/exam.png" type="image/x-icon">
    <link rel="stylesheet" href="static/layui/css/font.css">
    <link rel="stylesheet" href="static/layui/css/xadmin.css">
    <script src="static/layui/lib/layui/layui.js"></script>
    <script src="static/layui/js/xadmin.js"></script>
    <script src="static/layui/js/jquery.min.js"></script>

</head>

<body class="index">
<div class="container">
    <div class="logo">
        <a href="#">在线考试平台</a>
    </div>
    <ul class="layui-nav left" lay-filter="user_head">
        <li class="layui-nav-item"><a href="/exam_system/online_exam">在线考试</a></li>
        <li class="layui-nav-item"><a href="/exam_system/online_test">在线测试</a></li>
        <li class="layui-nav-item"><a href="/exam_system/score">我的成绩</a></li>
        <li class="layui-nav-item"><a href="/exam_system/error_question">我的错题</a></li>
        <li class="layui-nav-item"><a href="/exam_system/resources_library">资源库</a></li>
    </ul>
    <ul class="layui-nav right" lay-filter="header-user" id="user-state">

    </ul>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div style="position:fixed;">
            <div class="layui-col-sm12 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header" style="background: #00F7DE"><i
                            class="layui-icon layui-icon-spread-left"></i>题目导航
                        <span style="float: right" id="remaining_time">

                    </span>
                    </div>
                    <div class="layui-card-body" id="question_index">

                    </div>
                    <div class="layui-card-header" style="text-align: center">
                        <a class="layui-btn layui-btn-normal layui-btn-sm" onclick="is_exam()">确定交卷</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12 layui-col-md8 layui-col-md-offset3">
            <div class="layui-card">
                <div class="layui-card-header" style="background: #00F7DE">
                    <span style="float: left" id="e_name">
                    </span>
                </div>
                <div class="layui-card-body">

                    <div class="layui-row layui-col-space15" id="question_list">

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

</body>

<script>
    layui.use(['element', "form", 'jquery', 'layer', 'util'], function () {
        const form = layui.form;
        const $ = layui.jquery;
        const layer = layui.layer;
        const element = layui.element;
        var util = layui.util;
        header(element)
        get_exam_by_e_id()
        util.fixbar({
            top: true
            , css: {right: 15, bottom: 35}
            , bgcolor: '#2a96ff !important;display:block;'
            , showHeight: 100
            , click: function (type) {
                if (type === 'top') {
                    $('.layui-body').animate({//主要代码
                        scrollTop: 0
                    }, 200);
                }
            }
        });
    });

    function find_question(i) {
        $('html,body').animate({scrollTop: $("#" + i).offset().top}, 500)
    }

    function header(element) {
        var user_json = JSON.parse(sessionStorage.getItem("userJson"));
        var text = ""
        if (user_json === null) {
            location.href = '/exam_system/';
        } else {
            text += "<li class=\"layui-nav-item\">" +
                "                    <a href=\"javascript:;\">" + user_json.u_name + "</a>" +
                "                    <dl class=\"layui-nav-child\">" +
                "                        <dd><a onclick='modify_psw()'>修改密码</a></dd>" +
                "                        <dd><a onclick='user_quit()'>退出</a></dd>" +
                "                    </dl>" +
                "                </li>"
            $("#user-state").html(text)
        }
        element.render('header-user')
    }

    function user_quit() {
        sessionStorage.clear("userJson");
        location.href = '/exam_system/';
    }

    function modify_psw() {
        layui.use(['element', "form", 'jquery', 'layer'], function () {
            const form = layui.form;
            const $ = layui.jquery;
            const layer = layui.layer;
            const element = layui.element;
            var text = "<form class=\"layui-form layui-form-pane\" action=\"\">" +
                "    <div class=\"layui-form-item\">" +
                "        <label class=\"layui-form-label\">旧密码</label>" +
                "        <div class=\"layui-input-block\">" +
                "            <input type=\"text\" name=\"o_psw\" id='o_psw' autocomplete=\"off\" placeholder=\"请输入旧密码\"" +
                "                   class=\"layui-input\">" +
                "        </div>" +
                "    </div>" +
                "    <div class=\"layui-form-item\">" +
                "        <label class=\"layui-form-label\">新密码</label>" +
                "        <div class=\"layui-input-block\">" +
                "            <input type=\"password\" name=\"n_psw\" id='n_psw' autocomplete=\"off\" placeholder=\"请输入新密码\"" +
                "                   class=\"layui-input\">" +
                "        </div>" +
                "    </div>" +
                "    <div class=\"layui-form-item\">" +
                "        <label class=\"layui-form-label\">确认新密码</label>" +
                "        <div class=\"layui-input-block\">" +
                "            <input type=\"password\" name=\"re_psw\" id='re_psw' autocomplete=\"off\" placeholder=\"请输入确认密码\"" +
                "                   class=\"layui-input\">" +
                "        </div>" +
                "    </div>" +
                "</form>"
            var index = layer.open({
                type: 1,
                title: "修改密码",
                closeBtn: 1,
                shadeClose: true,
                btn: '确定',
                yes: function (index, layero) {
                    var o_psw = $("#o_psw").val();
                    var n_psw = $("#n_psw").val();
                    var re_psw = $("#re_psw").val();
                    var user_json = JSON.parse(sessionStorage.getItem("userJson"));
                    var u_psw = user_json.u_psw;
                    var u_id = user_json.u_id;
                    if (u_psw !== o_psw) {
                        layer.msg("旧密码错误 请重新输入", {icon: 5, time: 1000});
                        return false;
                    }
                    if (n_psw !== re_psw) {
                        layer.msg("两次密码不一致", {icon: 5, time: 1000});
                        return false;
                    }
                    $.ajax({
                        url: 'update_user_psw_by_u_id',
                        dataType: "json",//数据格式
                        type: "post",//请求方式
                        cache: false,
                        data: {
                            u_id: u_id,
                            u_psw: n_psw,
                        },
                        success: function (data) {
                            if (data.code === 200) {
                                layer.msg(data.message, {icon: 6}, function () {
                                    sessionStorage.clear("userJson");
                                    location.href = '/exam_system/';
                                });
                            } else {
                                layer.msg(data.message, {icon: 5, time: 1000});
                            }
                        },
                        error: function (e) {
                            alert("出现错误！！");
                        }
                    });
                },
                area: ['500px', '400px'],
                content: text
            });
        });
    }

    var index;

    function get_exam_by_e_id() {
        layui.use(['layer', 'form'], function () {
            const layer = layui.layer;
            const form = layui.form;
            const e_id = "${e_id}";

            $.ajax({
                url: 'get_exam_by_e_id',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                data: {e_id: e_id},
                success: function (data) {
                    if (data.code === 200) {
                        $("#e_name").html("<i class=\"layui-icon layui-icon-spread-left\"></i>" + data.result.exam.e_name);
                        maxtime = data.result.exam.e_duration * 60;
                        timer = setInterval("remaining_time()", 1000);
                        var text1 = "";
                        index = 1;
                        var question_len = data.result.scq_data.length + data.result.jq_data.length + data.result.saq_data.length + data.result.fbq_data.length;
                        for (let i = 0; i < question_len; i++) {
                            text1 += "<button type=\"button\" onclick='find_question(" + (i + 1) + ")' " +
                                "style='width: 30px;height: 30px;margin:10px 20px 10px 20px;' class=\"layui-btn layui-btn-primary layui-btn-sm\">" + (i + 1) + "</button>"
                        }
                        $("#question_index").html(text1);

                        var text = "";
                        for (let i = 0; i < data.result.scq_data.length; i++) {
                            text += "<div class=\"layui-col-sm12\" style=\"background: #f7f8fc\">" +
                                "                            <div class=\"layui-card\" id=\"" + index + "\">" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>" +
                                "                                    单选题(" + data.result.exam.e_scq_score + "分)" +
                                "                                </div>" +
                                "                                <div class=\"layui-card-header\">" +
                                "                                    <xmp>" + (i + 1) + "." + data.result.scq_data[i].c_describe + "</xmp>" +
                                "                                </div>" +
                                "                                <form class=\"layui-form\" action=\"\" lay-filter=\"" + index + "\">" +
                                "                                    <div class=\"layui-form-item\">" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"A\" title=\"<xmp>A:" + data.result.scq_data[i].c_a + "</xmp>\">" +
                                "                                    </div>" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"B\" title=\"<xmp>B:" + data.result.scq_data[i].c_b + "</xmp>\" >" +
                                "                                    </div>" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"C\" title=\"<xmp>C:" + data.result.scq_data[i].c_c + "</xmp>\" >" +
                                "                                    </div>" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"D\" title=\"<xmp>D:" + data.result.scq_data[i].c_d + "</xmp>\">" +
                                "                                        <input type=\"text\" hidden name=\"q_index\" value=\"cq_" + data.result.scq_data[i].c_id + "\">" +
                                "                                    </div>" +
                                "                                    </div>" +
                                "                                </form>" +
                                "                            </div>" +
                                "                        </div>";
                            index += 1;
                        }

                        for (let i = 0; i < data.result.jq_data.length; i++) {
                            text += "<div class=\"layui-col-sm12\" style=\"background: #f7f8fc\">" +
                                "                            <div class=\"layui-card\" id=\"" + index + "\">" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>" +
                                "                                    判断题(" + data.result.exam.e_jq_score + "分)" +
                                "                                </div>" +
                                "                                <div class=\"layui-card-header\">" +
                                "                                    <xmp>" + (i + 1) + "." + data.result.jq_data[i].j_describe + "</xmp>" +
                                "                                </div>" +
                                "                                <form class=\"layui-form\" action=\"\" lay-filter=\"" + index + "\">" +
                                "                                    <div class=\"layui-form-item\">" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"对\" title=\"对\">" +
                                "                                    </div>" +
                                "                                    <div class=\"layui-card-header\">" +
                                "                                        <input type=\"radio\" name=\"q_answer\" value=\"错\" title=\"错\" >" +
                                "                                        <input type=\"text\" hidden name=\"q_index\" value=\"jq_" + data.result.jq_data[i].j_id + "\">" +
                                "                                    </div>" +
                                "                                    </div>" +
                                "                                </form>" +
                                "                            </div>" +
                                "                        </div>";
                            index += 1;
                        }

                        for (let i = 0; i < data.result.fbq_data.length; i++) {
                            text += "<div class=\"layui-col-sm12\" style=\"background: #f7f8fc\">" +
                                "                            <div class=\"layui-card\" id=\"" + index + "\">" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>" +
                                "                                    填空题(" + data.result.exam.e_fbq_score + "分)" +
                                "                                </div>" +
                                "                                <div class=\"layui-card-header\">" +
                                "                                    <xmp>" + (i + 1) + "." + data.result.fbq_data[i].fb_describe + "</xmp>" +
                                "                                </div>" +
                                "                                <form class=\"layui-form\" action=\"\" lay-filter=\"" + index + "\">" +
                                "                                    <div class=\"layui-form-item\">"
                            var fill_blanks_num = (data.result.fbq_data[i].fb_answer).split(",").length;
                            text += "<div class='" + index + "'>"
                            for (let j = 0; j < fill_blanks_num; j++) {
                                text += "<div class=\"layui-card-body\">" +
                                    "       <input type=\"text\" name=\"q_answer\"  placeholder='请输入第" + (j + 1) + "空答案' lay-verify=\"required\" autocomplete=\"off\"" +
                                    "                           class=\"layui-input\"> " +
                                    "</div>"
                            }
                            text += "</div>"
                            text += "                                    <div class=\"layui-card-body\">" +
                                "                                        <input type=\"text\" hidden name=\"q_index\" value=\"fbq_" + data.result.fbq_data[i].fb_id + "\">" +
                                "                                    </div>" +
                                "                                    </div>" +
                                "                                </form>" +
                                "                            </div>" +
                                "                        </div>";
                            index += 1;
                        }

                        for (let i = 0; i < data.result.saq_data.length; i++) {
                            text += "<div class=\"layui-col-sm12\" style=\"background: #f7f8fc\">" +
                                "                            <div class=\"layui-card\" id=\"" + index + "\">" +
                                "                                <div class=\"layui-card-header\" style='background: gainsboro'>" +
                                "                                    简答题(" + data.result.exam.e_saq_score + "分)" +
                                "                                </div>" +
                                "                                <div class=\"layui-card-header\">" +
                                "                                    <xmp>" + (i + 1) + "." + data.result.saq_data[i].sa_describe + "</xmp>" +
                                "                                </div>" +
                                "                                <form class=\"layui-form\" action=\"\" lay-filter=\"" + index + "\">" +
                                "                                    <div class=\"layui-form-item\">" +
                                "                                    <div class=\"layui-card-body\">" +
                                "                                        <textarea placeholder=\"请输入内容\" name=\"q_answer\" class=\"layui-textarea\"></textarea>" +
                                "                                        <input type=\"text\" hidden name=\"q_index\" value=\"saq_" + data.result.saq_data[i].sa_id + "\">" +
                                "                                    </div>" +
                                "                                    </div>" +
                                "                                </form>" +
                                "                            </div>" +
                                "                        </div>";
                            index += 1;
                        }
                        $("#question_list").html(text);
                        form.render();

                    } else {

                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });
        })
    }

    var maxtime;

    function remaining_time() {
        layui.use(['layer'], function () {
            const layer = layui.layer;
            if (maxtime >= 0) {
                minutes = Math.floor(maxtime / 60);
                seconds = Math.floor(maxtime % 60);
                msg = "距离结束还有" + minutes + "分" + seconds + "秒";
                $("#remaining_time").html(msg)
                if (maxtime === 5 * 60) {
                    layer.alert("还剩5分钟", {icon: 0})
                }
                --maxtime;
            } else {
                clearInterval(timer);
                layer.msg("时间到,请交卷", {icon: 0}, function () {
                    alert(1)
                })
            }
        })
    }

    function is_exam() {
        layui.use(['layer'], function () {
            const layer = layui.layer;
            const form = layui.form;

            const eu_id = "${eu_id}";

            var cq_res_data = []
            var jq_res_data = []
            var sa_res_data = []
            var fbq_res_data = []
            for (let i = 0; i < index - 1; i++) {
                const data = form.val((i + 1));
                const q_answer = data.q_answer;
                const q_index = data.q_index;
                if (q_answer === undefined || q_answer.length===0) {
                    layer.msg("请先完成第" + (i + 1) + "题后提交", {icon: 0}, function () {
                        $('html,body').animate({scrollTop: $("#" + (i + 1)).offset().top}, 500)
                    })
                    return false
                }
                var n1 = q_index.split('_');
                if (n1[0] === "cq") {
                    cq_res_data.push(n1[1] + "_" + q_answer)
                }
                if (n1[0] === "jq") {
                    jq_res_data.push(n1[1] + "_" + q_answer)
                }
                if (n1[0] === "saq") {
                    sa_res_data.push(n1[1] + "_" + q_answer)
                }

                if (n1[0] === "fbq") {
                    var fb_data = []
                    $("." + (i+1) + " input").each(function () {
                        console.log(this.value);
                        fb_data.push(this.value)
                    })
                    fbq_res_data.push(n1[1] + "_" +fb_data.join('***'))
                }
            }

            layer.confirm("提交后不能修改答案,确定提交?",{icon:0},function (){
                $.ajax({
                    url: 'add_user_paper_result',
                    dataType: "json",//数据格式
                    type: "post",//请求方式
                    async: false,//是否异步请求
                    traditional: true,
                    data: {
                        eu_id:eu_id,
                        cq_res_data:cq_res_data.toString(),
                        jq_res_data:jq_res_data.toString(),
                        fbq_res_data:fbq_res_data.toString(),
                        sa_res_data:sa_res_data.join("***")
                    },
                    success: function (data) {
                        if (data.code===0){
                            layer.msg(data.message,{icon: 5, time:1000})
                        }
                        else if (data.code===200){
                            layer.msg(data.message,{icon: 6, time:1000},function (){
                                location.href="/exam_system/online_exam"
                            })
                        }else {
                            layer.msg('系统繁忙',{icon: 5, time:1000})
                        }
                    },
                    error: function (e) {
                        alert("出现错误！！");
                    }
                });
            })

        })
    }
</script>
</html>